import React, { useState ,useRef} from 'react';
import { Form, Row, Col, Input, Button ,Select ,InputNumber ,Checkbox ,Radio ,DatePicker} from 'dw-mx';
import { Code, NumberMask} from 'dw-mx-extend';
import moment from 'moment';

// 表单设置默认值:initialValues

// 隐藏使用动态渲染

// 日期类型必须是moment

// 只读:readOnly 必填:required 隐藏:hidden 清空:allowClear 初值:initialValues 取值:getFieldsValue 设值:setFieldsValue 


export default function StringInputDemo() {

    const [form] = Form.useForm();

    const initValues = {
        'templatenum':'',
        'templatename':'001xxx',
        'contentname':'',
        'formatname':'格式名称',
        'n1':'',
        'n2':'8',
        'n3':'9',
        'xb':'1',
        'rwzt':'',
        'rwzt2':'',
        'proapp':'',
        'proapp2':'1',
        'proown':'1',
        'subordinate':'',
        'y1':moment().year(2000),
        'y3':moment().year(2000).month(1).day(1)
    }

    const setvalue = {
        'templatenum':'132',
        'templatename':'xx123456',
        'contentname':'模板内容说明',
        'formatname':'格式重命名',
        'n1':'1',
        'n2':'1',
        'n3':'1',
        'xb':'2',
        'rwzt':'3',
        'proapp':'3',
        'proapp2':'3',
        'proown':'4',
        'subordinate':'4',
        'y1':moment(),
        'y3':moment(),
    }

    const inputref = useRef(null) 

    const onClick = async (value) => {
        // 可以从外部取值
        console.log(form.getFieldsValue());
        inputref.current.focus();

        // 可以验证必填项
        try {
            const values = await form.validateFields();
            console.log('Success:', values);
            
        } catch (errorInfo) {
            // 验证失败
            console.log('Failed:', errorInfo);
        }

    };

    const [ishidden,sethidden] = useState(false)

    const layout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 }
    };

    return (
        <>
            <Form form={form}
                  {...layout}
                  layout={'horizontal'}
                  initialValues={initValues}
                  scrollToFirstError={true}>
                <Row>
                    <Col  span={8} hidden={ishidden}>
                        <Form.Item label="模板编号" name="templatenum" rules={[{ required: true }]} >
                            <Input placeholder={"模板编号"} maxLength={10} autoFocus={true}/>
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item label="模板名称" name="templatename">
                            <Input placeholder={"模板名称"} allowClear={true}/>
                        </Form.Item>
                    </Col>
                    <Col span={8} hidden={ishidden}>
                        <Form.Item label="填写须知" name="mustname">
                            <Input placeholder={"填写须知"} readOnly={true}/>
                        </Form.Item>
                    </Col>
                    <Col span={8} hidden={ishidden}>
                        <Form.Item label="模板内容" name="contentname" rules={[{ required: true }]}>
                            <Input.TextArea placeholder={"模板内容"} maxLength={10} ref={inputref}/>
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item label="格式名称" name="formatname">
                            <Input.TextArea placeholder={"格式名称"} maxLength={10}  allowClear={true}/>
                        </Form.Item>
                    </Col>
                    <Col span={8} hidden={ishidden}>
                        <Form.Item label="模板说明" name="explainname">
                            <Input.TextArea placeholder={"模板说明(只读)"} readOnly={true}/>
                        </Form.Item>
                    </Col>
                    <Col span={8} hidden={ishidden}> 
                        <Form.Item label="####" name="n1" rules={[{ required: true }]}>
                            <InputNumber placeholder={'####'} {...NumberMask("###")} />
                        </Form.Item>
                    </Col>
                    <Col span={8} hidden={ishidden}>
                        <Form.Item label="####.00" name="n2">
                            <InputNumber placeholder={'####.00'} {...NumberMask("####.00")}/>
                        </Form.Item>
                    </Col>
                    <Col span={8} hidden={ishidden}>
                        <Form.Item label="####.00" name="n3">
                            <InputNumber placeholder={'####.00'} {...NumberMask("####.00")} readOnly={true}/>
                        </Form.Item>
                    </Col>

                    <Col span={12} hidden={ishidden}>
                        <Form.Item label="性别" name="xb" rules={[{ required: true }]}>
                            <Select options={Code.STRINGCODE('1:男,2:女')} allowClear={true} placeholder={"请选择..."}/>
                        </Form.Item>
                    </Col>
                    <Col span={12} hidden={ishidden}>
                        <Form.Item label="任务状态" name="rwzt" >
                            <Select options={Code.STRINGCODE('1:已完成,2:未完成,3:已作废')} placeholder={"请选择..."}/>
                        </Form.Item>
                    </Col>
                    <Col span={12} hidden={ishidden}>
                        <Form.Item label="产品应用地" name="proapp" rules={[{ required: true }]}>
                            <Checkbox.Group options={Code.STRINGCODE('1:北京,2:上海,3:广州')}/>
                        </Form.Item>
                    </Col>
                    <Col span={12} hidden={ishidden}>
                        <Form.Item label="产品应用地" name="proapp2" >
                            <Checkbox.Group options={Code.STRINGCODE('1:山东,2:上海,3:广州')}/>
                        </Form.Item>
                    </Col>
                    <Col span={8} hidden={ishidden}>
                        <Form.Item label="产品归属地" name="proown" rules={[{ required: true }]}>
                            <Radio.Group options={Code.STRINGCODE('1:济南,2:北京,3:南京,4:合肥')} />
                        </Form.Item>
                    </Col>
                    <Col span={12} hidden={ishidden}>
                        <Form.Item label="隶属应用" name="subordinate">
                            <Radio.Group options={Code.STRINGCODE('1:ACCMS,2:BMRS,3:SEF,4:BPZone')} />
                        </Form.Item>
                    </Col>
                    <Col span={12} hidden={ishidden}>
                        <Form.Item label="年" name="y1" rules={[{ required: true }]}>
                            <DatePicker picker={'year'} format={'YYYY'} />
                        </Form.Item>
                    </Col>
                    
                    <Col span={8} hidden={ishidden}> 
                        <Form.Item label="年月日" name="y3" >
                            <DatePicker picker={'week'} format={'YYYY-MM-DD'} />
                        </Form.Item>
                    </Col>
                    
                </Row>
                
            </Form>

            <Button onClick={onClick}>取值</Button>
            <Button onClick={() => sethidden(!ishidden)}>隐藏</Button>
            <Button onClick={() => form.setFieldsValue(setvalue)}>填值</Button>
        </>
    );
}